<template>
  <div class="material-main">
    <el-dialog title="选择素材" :visible.sync="dialog" width="60%" @close="handleClose" append-to-body>
      <div class="content">
        <div class="card">
          <div slot="header">
            <el-upload
              class="btn-upload"
              action="/admin/xy/upload/uploadImg"
              :on-success="handleSucee"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <!-- 选择富文本才显示 -->
            <div v-if="type==1">
              <el-input v-model="selImgUrl" placeholder></el-input>
              <el-button @click="handleCopy(selImgUrl,$event)">copy</el-button>
            </div>
          </div>
          <MyPagination :page="page"></MyPagination>
          <el-row :gutter="30">
            <el-col class="img-block-fk" :span="6" v-for="m in imgList" :key="m.id">
              <el-card
                @click.native="sel(m.id,Url.host+'/'+m.dir+'/'+m.fileName)"
                class="img-card"
                :class="{'selected':m.id==selId}"
                shadow="hover"
              >
                <el-image
                  style="width: 90%; height: 300px"
                  :src="Url.host+'/'+m.dir+'/'+m.fileName"
                  fit="contain"
                ></el-image>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import materialApi from "@/api/content/material";
import MyPagination from "@/components/common/Pagination";
import pageMixin from "@/mixins/pageMixin";
import Url from "@/api/config";
import _ from "lodash";
import { resetData, resetVmData } from "@/utils/index";
import clip from "@/utils/clipboard";
export default {
  name: "ArticleMaterial",
  mixins: [pageMixin],
  components: {
    MyPagination
  },
  data() {
    return {
      dialog: false,
      Url,
      search: {},
      imgList: [],
      editId: "", //标识哪个被编辑
      page: {
        limit: 12,
        sizes: [12, 24, 356]
      },
      selId: "",
      selImgUrl: "",
      type: 0 // type: 0/1  0  为选择封面 ; 1 为选择内容 . 选择封面需要$emit执行父组件事件,不需要复制,否则需要复制
    };
  },
  created() {},
  methods: {
    openDialog(type) {
      this.type = type;
      this.dialog = true;
      this.getImgList();
    },
    getImgList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      };
      params = _.pickBy(params, item => item);
      console.log(this.search);
      console.log(params);

      materialApi.getImgList(params).then(({ data }) => {
        this.imgList = data.list;
        this.page.start = data.pageNumber;
        this.page.limit = data.pageSize;
        this.page.total = data.totalRow;
      });
    },
    handleSucee() {
      //成功后刷新列表
      this.getImgList();
    },
    doSearch() {
      resetData(this, "page");
      this.getImgList();
    },
    doResetSearch() {
      resetData(this, "search");
      this.getImgList();
    },
    handleClose() {
      //重置所有表单
      resetVmData(this);
      this.dialog = false;
    },
    handleSel() {
      var url = this.selImgUrl;
      this.$emit("handle-cover-sel", url);
      this.handleClose();
    },
    handleCopy(v, event) {
      clip(v, event);
    },
    sel(id, url) {
      this.selId = this.selId == id ? "" : id;
      // 如果选中了才有
      if (this.selId) {
        this.selImgUrl = url;
      } else {
        this.selImgUrl = "";
      }
    }
  }
};
</script>
<style lang="css">
.img-block-fk {
  position: relative;
}
.img-block-fk .selected::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "√";
  display: block;
  font-size: 30px;
  color: #67c23a;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 400px;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

<style lang='scss' scoped>
.material-main {
  .card {
    margin: 30px;
    box-sizing: border-box;
    ::v-deep .el-card__body {
      text-align: center;
    }
  }
  .content {
    .img-block {
      margin: 20px auto;
      height: 400px;
    }

    .tool-bar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .title {
        font-size: 14px;
        color: #333;
        &.unnamed {
          color: #909399;
        }
      }
      .size {
        font-size: 12px;
        color: #333;
      }
    }
  }
}
</style>
